<template>
	<div class="page-city wrapper">
		<div>
			<dl class="city-hot" >
				<dt>热门城市</dt>
				<dd v-for="item of hot" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</dd>
				
			</dl>
			<dl class="city-zm">
				<dt>字母排序</dt>
				<dd v-for="(item,key,index) of cities" :key="key" @click="(e) => {handleLetter (e,index)}">{{key}}</dd>
			</dl>
			<dl class="city-list" v-for="(item,key) of cities" :key="key" ref="key">
				<dt >{{key}}</dt>
				<dd v-for="innerItem of item" :key="innerItem.id" @click="handleCityClick(innerItem.name)">{{innerItem.name}}</dd>
			</dl>
		</div>
	</div>
</template>
<script>
import BScroll from 'better-scroll'
import { mapMutations } from 'vuex'
export default {
	name: 'CityList',
	props: {
		hot: Array,
		cities: Object
	},
	methods: {
		handleLetter (e,index) {
			const element = this.$refs.key[index]
			this.scroll.scrollToElement(element)
		},
		handleCityClick (city) {
			// this.$store.commit('changeCity', city)
			this.changeCity(city)
			this.$router.push('/')
		},
		...mapMutations(['changeCity'])
	},
	mounted () {	
	    this.scroll = new BScroll('.wrapper',{
	    	click: true
	    })
	}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/scss/setting';
@import '~@/assets/scss/css3';
@import '~@/assets/scss/mixin';
@import '~@/assets/scss/reset';
@import '~@/assets/scss/style';

.page-city {
	overflow: hidden;
	position: absolute;
	top: px2rem(176px);
	bottom: 0;
	left: 0;
	right: 0;
	dt {
		line-height: px2rem(68px);
		border-bottom: px2rem(1px) solid #ddd;
		padding-left: px2rem(40px);
	}
	dd {
		display: inline-block;
		line-height: px2rem(88px);
		box-sizing: border-box;
		background: #fff;
		text-align: center;
		border: px2rem(1px) solid #ddd;
		border-top: none;
		border-left: none;
		& + dd {
			border-left: none;
		}
	}
	.city-hot {
		dd { 
			width: 33.33%;
			&:nth-child(4) {
				border-right: none;
			}
			&:nth-child(7) {
				border-right: none;
			}
		}
	}
	.city-zm {
		dd {
			width: 20%;
			&:nth-child(4) {
				border-right: px2rem(1px) solid #ddd;
			}
			&:nth-child(7) {
				border-right: px2rem(1px) solid #ddd;
			}
		}
	}
	.city-list {
		dd {
			width: 25%;
		}
		&:nth-child(4) {
			border-right: px2rem(1px) solid #ddd;
		}
		&:nth-child(7) {
			border-right: px2rem(1px) solid #ddd;
		}
	}
}
.city-hot {

}

</style>